<!doctype html>
<html class="no-js" lang="zxx">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="../static/js/echarts.min.js"></script>
        <script src="../static/js/echarts-wordcloud.min.js"></script>

        <title>电商交易数据可视化</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        

        <!-- All css here -->
        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="../static/css/animate.css">
        <link rel="stylesheet" href="../static/css/slick.css">
        <link rel="stylesheet" href="../static/css/meanmenu.css">
        <link rel="stylesheet" href="../static/css/default.css">
        <link rel="stylesheet" href="../static/css/style.css">
        <link rel="stylesheet" href="../static/css/responsive.css">

        <style>
        .example-div {
            width: 1800px;
            height: 1000px;
            top: -230px;
            bottom: 0;
            right: 720px;
            {#background-color: #c51717;#}

        }
        </style>

    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
        <!--  ====== preloader=============================================  -->
        <div id="preloader">
            <div id="loading">
                <div id="loading-center">
                    <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_five"></div>
                    <div class="object" id="object_six"></div>
                    <div class="object" id="object_seven"></div>
                    <div class="object" id="object_eight"></div>
                    
                    </div>
                </div>
            </div>
        </div><!-- /preloader -->

        <!--  ====== header-area-start=======================================  -->
        <header>
            <div id="header-sticky" class="transparent-header header-area">
                <div class="header header5">
                    <div class="container">
                        <div class="row align-items-center justify-content-between">
                            <div class="col-xl-3 col-lg-2 col-md-3 col-sm-3 col-4">
                                <div class="logo d-inline-block">
{#                                    <h1 class="text-white wow fadeIn f-700 pb-15 text-center" style="margin-left: -300px";>电商交易数据可视化</h1>#}
                                    <a href="/home"><h1 class="text-white wow fadeIn f-700 pb-15 transition-3" style="margin-left: -300px">电商交易数据可视化</h1></a>

                                </div>
                            </div><!-- /col -->
                            <div class="col-xl-8 col-lg-9 col-md-8 col-sm-8 col-8 d-flex justify-content-end" style="margin-right: -400px">
                               <div class="main-menu">
                                   <nav id="mobile-menu">
                                        <ul class="d-block">
                                            <li>
                                                <a class="active text-white" href="/home">首 页</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/rata">男女比例</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/action">消费行为</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/age">年龄数据</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/item">热门商品词云</a>
                                            </li>
                                            <li>
                                                <a class="text-white" href="/province">各省份消费数据</a>
                                            </li>
                                             <li>
                                                <a class="text-white" href="/recall">回头客预测</a>
                                            </li>
                                        </ul>
                                   </nav>
                               </div><!-- /main-menu -->

                            </div><!-- /col -->
                        </div><!-- /row -->
                    </div><!-- /container -->
                </div>
            </div><!-- /header-bottom -->
        </header>
        <!--  header-area-end  -->


        <!--  ====== header extra info start================================== -->
            <!-- side-mobile-menu start -->
            <div class="side-mobile-menu bg-white pt-50  pb-30 pl-30 pr-30">
                <div class="close-icon float-right pt-10 mb-20">
                    <a href="javascript:void(0);"><span class="icon-clear theme-color"><i class="fa fa-times"></i></span></a>
                </div>
                <div class="mobile-menu"></div>
            </div><!-- /side-mobile-menu -->
            <div class="body-overlay"></div>
        <!-- header extra info end  -->
   

        <main>

            <div class="feature-product-wrapper-bg position-relative" style="background-color: white">
                <!-- ====== our-product-area-start================================ -->
                <div id="product" class="product-area pt-110 pb-260 over-hidden">
                   
                    <div class="container position-relative ">
                        <div class="product-bg">
                            <img src="../static/picture/product-bg.png" alt="">
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-xl-6 col-lg-7 col-md-8  col-sm-12 col-12">
                                <div class="title text-center d-inline-block mb-70" >
                                    <span class="sub-heading d-block f-700 theme-color">WordCloud</span>
                                    <h3 class="f-700 mb-20">热门商品词云</h3>
                               </div><!-- /title -->
                                <div class="about-content mt-35 b-50 pt-10">
                                                    <div id="example" class="example-div wow fadeInUp" data-wow-duration="1.2s">
                                                        <script type="text/javascript">
                                                            var myChart = echarts.init(document.getElementById('example'));
                                                            image1=''
                                                            var maskResource = new Image();
                                                            maskResource.src = image1;
                                                            var data = {{ canshu | tojson }};

                                                                // 提取用于图表的数据

                                                                // 提取各自元组的值
                                                                var nv_0 = data[0][1];
                                                                var nv_1 = data[1][1];
                                                                var nv_2 = data[2][1];
                                                                var nv_3 = data[3][1];
                                                                var nv_4 = data[4][1];
                                                                var nv_5 = data[5][1];
                                                                var nv_6 = data[6][1];
                                                                var nv_7 = data[7][1];
                                                                var nv_8 = data[8][1];
                                                                var nv_9 = data[9][1];
                                                                var nv_10 = data[10][1];
                                                                var nv_11 = data[11][1];
                                                                var nv_12 = data[12][1];
                                                                var nv_13 = data[13][1];
                                                                var nv_14 = data[14][1];
                                                                var nv_15 = data[15][1];
                                                                var nv_16 = data[16][1];
                                                                var nv_17 = data[17][1];
                                                                var nv_18 = data[18][1];
                                                                var nv_19 = data[19][1];
                                                                var nv_20 = data[20][1];
                                                                var nv_21 = data[21][1];
                                                                var nv_22 = data[22][1];



                                                                // 指定图表的配置项和数据
                                                                var option = {

                                                                    title: {
                                                                    text: '',
                                                                    left: 'center'
                                                                },
                                                                tooltip: {},
                                                                series: [
                                                                    {
                                                                        type : 'wordCloud',  //类型为字符云
                                                                        shape:'smooth',  //平滑
                                                                        gridSize : 30, //网格尺寸
                                                                        rotationStep: 3,
                                                                        sizeRange : [ 10, 60],
                                                                        maskImage: maskResource,
                                                                        rotationRange : [-35,-15, 0,15,35], //旋转范围
                                                                            textStyle: {
                                                                                  fontFamily: '微软雅黑',
                                                                                  fontsize:20,
                                                                                      color: function () {
                                                                                          return 'rgb(' + [
                                                                                            Math.round(Math.random() * 250),
                                                                                            Math.round(Math.random() * 250),
                                                                                            Math.round(Math.random() * 250)
                                                                                          ].join(',') + ')';
                                                                                        },
                                                                                emphasis : {
                                                                                    shadowBlur : 5,  //阴影距离
                                                                                    shadowColor : '#04e3f1',  //阴影颜色
                                                                                    scale: 1.5
                                                                                        }
                                                                                    },
                                                                                    left: 'center',
                                                                                    right: '100%',
                                                                                    bottom: '100%',
                                                                                    width:'100%',
                                                                                    height:'100%',
                                                                                    data:[
                                                                                        {value: nv_0, name: '食品'},
                                                                                        {value: nv_1, name: '女装男装'},
                                                                                        {value: nv_2, name: '手机数码'},
                                                                                        {value: nv_3, name: '洗护'},
                                                                                        {value: nv_4, name: '文具'},
                                                                                        {value: nv_5, name: '医药健康'},
                                                                                        {value: nv_6, name: '玩具'},
                                                                                        {value: nv_7, name: '美妆'},
                                                                                        {value: nv_8, name: '汽车'},
                                                                                        {value: nv_9, name: '家居'},
                                                                                        {value: nv_10, name: '户外'},
                                                                                        {value: nv_11, name: '办公'},
                                                                                        {value: nv_12, name: '定制'},
                                                                                        {value: nv_13, name: '工业品'},
                                                                                        {value: nv_14, name: '宠物'},
                                                                                        {value: nv_15, name: '家用杂物'},
                                                                                        {value: nv_16, name: '农资采购'},
                                                                                        {value: nv_17, name: '花鸟'},
                                                                                        {value: nv_18, name: '文娱'},
                                                                                        {value: nv_19, name: '游戏中心'},
                                                                                        {value: nv_20, name: '电玩'},
                                                                                        {value: nv_21, name: '全屋定制'},
                                                                                        {value: nv_22, name: '美容护肤'},

                                                                                        {value: nv_0, name: '食品'},
                                                                                        {value: nv_1, name: '女装男装'},
                                                                                        {value: nv_2, name: '手机数码'},
                                                                                        {value: nv_3, name: '洗护'},
                                                                                        {value: nv_4, name: '文具'},
                                                                                        {value: nv_5, name: '医药健康'},
                                                                                        {value: nv_6, name: '玩具'},
                                                                                        {value: nv_7, name: '美妆'},
                                                                                        {value: nv_8, name: '汽车'},
                                                                                        {value: nv_9, name: '家居'},
                                                                                        {value: nv_10, name: '户外'},
                                                                                        {value: nv_11, name: '办公'},
                                                                                        {value: nv_12, name: '定制'},
                                                                                        {value: nv_13, name: '工业品'},
                                                                                        {value: nv_14, name: '宠物'},
                                                                                        {value: nv_15, name: '家用杂物'},
                                                                                        {value: nv_16, name: '农资采购'},
                                                                                        {value: nv_17, name: '花鸟'},
                                                                                        {value: nv_18, name: '文娱'},
                                                                                        {value: nv_19, name: '游戏中心'},
                                                                                        {value: nv_20, name: '电玩'},
                                                                                        {value: nv_21, name: '全屋定制'},
                                                                                        {value: nv_22, name: '美容护肤'},

                                                                                        {value: nv_0, name: '食品'},
                                                                                        {value: nv_1, name: '女装男装'},
                                                                                        {value: nv_2, name: '手机数码'},
                                                                                        {value: nv_3, name: '洗护'},
                                                                                        {value: nv_4, name: '文具'},
                                                                                        {value: nv_5, name: '医药健康'},
                                                                                        {value: nv_6, name: '玩具'},
                                                                                        {value: nv_7, name: '美妆'},
                                                                                        {value: nv_8, name: '汽车'},
                                                                                        {value: nv_9, name: '家居'},
                                                                                        {value: nv_10, name: '户外'},
                                                                                        {value: nv_11, name: '办公'},
                                                                                        {value: nv_12, name: '定制'},
                                                                                        {value: nv_13, name: '工业品'},
                                                                                        {value: nv_14, name: '宠物'},
                                                                                        {value: nv_15, name: '家用杂物'},
                                                                                        {value: nv_16, name: '农资采购'},
                                                                                        {value: nv_17, name: '花鸟'},
                                                                                        {value: nv_18, name: '文娱'},
                                                                                        {value: nv_19, name: '游戏中心'},
                                                                                        {value: nv_20, name: '电玩'},
                                                                                        {value: nv_21, name: '全屋定制'},
                                                                                        {value: nv_22, name: '美容护肤'},

                                                                                        {value: nv_0, name: '食品'},
                                                                                        {value: nv_1, name: '女装男装'},
                                                                                        {value: nv_2, name: '手机数码'},
                                                                                        {value: nv_3, name: '洗护'},
                                                                                        {value: nv_4, name: '文具'},
                                                                                        {value: nv_5, name: '医药健康'},
                                                                                        {value: nv_6, name: '玩具'},
                                                                                        {value: nv_7, name: '美妆'},
                                                                                        {value: nv_8, name: '汽车'},
                                                                                        {value: nv_9, name: '家居'},
                                                                                        {value: nv_10, name: '户外'},
                                                                                        {value: nv_11, name: '办公'},
                                                                                        {value: nv_12, name: '定制'},
                                                                                        {value: nv_13, name: '工业品'},
                                                                                        {value: nv_14, name: '宠物'},
                                                                                        {value: nv_15, name: '家用杂物'},
                                                                                        {value: nv_16, name: '农资采购'},
                                                                                        {value: nv_17, name: '花鸟'},
                                                                                        {value: nv_18, name: '文娱'},
                                                                                        {value: nv_19, name: '游戏中心'},
                                                                                        {value: nv_20, name: '电玩'},
                                                                                        {value: nv_21, name: '全屋定制'},
                                                                                        {value: nv_22, name: '美容护肤'},

                                                                                        {value: nv_8, name: '汽车'},
                                                                                        {value: nv_9, name: '家居'},
                                                                                        {value: nv_10, name: '户外'},
                                                                                        {value: nv_11, name: '办公'},
                                                                                        {value: nv_12, name: '定制'},
                                                                                        {value: nv_13, name: '工业品'},
                                                                                        {value: nv_14, name: '宠物'},
                                                                                        {value: nv_15, name: '家用杂物'},
                                                                                        {value: nv_16, name: '农资采购'},
                                                                                        {value: nv_17, name: '花鸟'},
                                                                                        {value: nv_18, name: '文娱'},
                                                                                        {value: nv_19, name: '游戏中心'},
                                                                                        {value: nv_20, name: '电玩'},
                                                                                        {value: nv_21, name: '全屋定制'},
                                                                                        {value: nv_22, name: '美容护肤'},
                                                                            ],
                                                                    }
                                                                ]
                                                                };


                                                                option && myChart.setOption(option);
                                                                myChart.on('click',function(param){

                                                              console.log(param);
                                                              window.open("https://s.taobao.com/search?catId=100&from=sea_1_searchbutton&q="+encodeURIComponent(param.name),'_blank')


				                                            });
                                                        </script>
                                </div>

                            </div><!-- /about-content -->


                            </div><!-- /col -->







                        </div><!-- /row -->

                    </div><!-- /container -->
                </div><!-- /product-area -->
                <!-- our-product-area-end  -->
                <img class="f-img-bg w-100 position-absolute top-0 left-0 right-0 w-100 mt-50 mb-100 z-index-1" src="../static/picture/feature-bg.png" alt="">
            </div><!-- /feature-product-wrapper-bg -->

        </main>



        <!-- All js here -->
        <script src="../static/js/modernizr-3.5.0.min.js"></script>
        <script src="../static/js/jquery-1.12.4.min.js"></script>
        <script src="../static/js/popper.min.js"></script>
        <script src="../static/js/bootstrap.min.js"></script>
        <script src="../static/js/one-page-nav-min.js"></script>
        <script src="../static/js/slick.min.js"></script>
        <script src="../static/js/wow.min.js"></script>
        <script src="../static/js/plugins.js"></script>
        <script src="../static/js/jquery.meanmenu.min.js"></script>
        <script src="../static/js/main.js"></script>
    	
</body>
</html>